梦入琼楼寒有月，行过石树冻无烟

D3 弦生成器

2022-04-21


弦生成器（Chord Generator），主要用于将两个弧进行连接，可通过使用d3.svg.chord()进行声明，分别有五个访问器：“source（起始弧）、target（终止弧）、radius（半径）、startAngle（起始角度）、endAngle（终止角度）”，弦生成器是生成弦图的重要组成部分之一。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* svg 基本结构 */
var padding = {
    width: 800,
    height: 800
}

var svg = d3.select("body")
    .append("svg")
    .attr("width", padding.width)
    .attr("height", padding.height)

/* 弦数据 */
var databases = {
    source: {
        startAngle: 0.2,
        endAngle: Math.PI * 0.3,
        radius: 100
    },
    target: {
        startAngle: Math.PI * 1.0,
        endAngle: Math.PI * 1.6,
        radius: 100
    }
}

/* 声明弦 */
var chord = d3.svg.chord()

/* 弦绘制 */
svg.append("path")
    .attr("d",chord(databases))
    .attr("transform","translate(200,200)")
    .attr("fill","none")
    .attr("stroke","#51d576")
    .attr("stroke-width",5)
⬅️ Go back